.f-extend-panel {
    width: 100%;
    height: auto;
    min-height: 160px;
    box-sizing: border-box;
}

.f-extend-panel-layout {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    --extend-panel-len: 3;
    --extend-panel-gap: 10px;
    --extend-panel-item-scale: 0.8;
    --extend-panel-cover-width: 100%;
}

.f-extend-panel-layout-item {
    width: calc((100% - (var(--extend-panel-gap) * (var(--extend-panel-len) - 1))) / var(--extend-panel-len));
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 100;
    transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s;
    transform: translate3d(calc(100% * var(--f-extend-panel-layout-item-index) + var(--f-extend-panel-layout-item-index) * var(--extend-panel-gap)), 0, 0);
}

.f-extend-panel.f-extend-panel-start .f-extend-panel-layout-item:not(.f-extend-panel-layout-item-checked) {
    transform: translate3d(calc(100% * var(--f-extend-panel-layout-item-index) + var(--f-extend-panel-layout-item-index) * var(--extend-panel-gap)), 0, 0) scale(var(--extend-panel-item-scale));
    transition: transform 0.95s, opacity 0.95s;
}

.f-extend-panel-layout-item-checked {
    width: 100%;
    z-index: 110;
    transform: translate3d(0%, 0, 0);
    transition: transform 0.6s, width 0.7s 0.7s, z-index 0s;
}

.f-extend-panel-layout-item-custom {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    box-shadow: -1px -1px 2px #3b8ce97a, 1px 1px 2px #5bc3747a;
    border-radius: 10px;
    background-color: #fff;
    transition: box-shadow .3s linear;
}

.f-extend-panel-layout-item-custom:hover {
    box-shadow: -1px -1px 2px #5bc3747a, 1px 1px 2px #3b8ce97a;
}

.f-extend-panel-layout-item-custom .f-extend-panel-layout-item-custom-cover {
    width: var(--extend-panel-cover-width);
    min-width: var(--extend-panel-cover-width);
    max-width: var(--extend-panel-cover-width);
}

.f-extend-panel-layout-item-custom .f-extend-panel-layout-item-custom-content {
    flex: 1;
    height: 100%;
    background-color: #fff;
    width: inherit;
    overflow: inherit;
}

.f-extend-panel-item-cover-components {
    box-sizing: border-box;
    padding: 10px 10px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    position: relative;
    background: linear-gradient(to bottom right, #5bc3740a, #3b8ce90a);
}

.f-extend-panel-item-cover-components-num,
.f-extend-panel-item-cover-components-tip {
    font-size: 12px;
    min-height: 12px;
    max-height: 12px;
    line-height: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f-extend-panel-item-cover-components-flex {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 14px;
    padding-bottom: 6px;
}

.f-extend-panel-item-cover-components-title {
    font-size: 24px;
    height: 24px;
    line-height: calc(1em - 2px);
    font-weight: 600;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f-extend-panel-item-cover-components-des {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
    line-height: 18px;
    max-height: calc(18px * 4);
    /* min-height: calc(18px * 4); */
    height: calc(18px * 4);
    height: auto;
    /* 高度自适应 */
    overflow: hidden;
    /* 控制元素溢出时的显示效果 */
    text-overflow: ellipsis;
    /* 当文字超出容器范围时显示省略号 */
    display: -webkit-box;
    /* 将元素作为弹性伸缩盒子模型进行布局 */
    -webkit-line-clamp: 4;
    /* 限制最多显示两行文本 */
    -webkit-box-orient: vertical;
    /* 垂直方向排列文本 */
    word-wrap: break-word;
}


.f-extend-panel-item-content-components {
    /* width: 100%; */
    /* height: 100%; */
    /* display: flex; */
    background: #fff;
}
.f-extend-panel-item-content-components-openScroll .f-extend-panel-item-content-componentsRotate {
    width: var(--extend-panel-content-height);
    height: var(--extend-panel-content-width);
    transform-origin:0 0;
    transform:translateY(var(--extend-panel-content-height)) rotate(-90deg);
    position:relative;
    overflow:auto;
    scroll-behavior:smooth;
}
.f-extend-panel-item-content-components-openScroll .f-extend-panel-item-content-componentsRotate::-webkit-scrollbar {
  width: 1px; /* 设置滚动条的宽度 */
}

/* 设置滚动条轨道的样式 */
.f-extend-panel-item-content-components-openScroll .f-extend-panel-item-content-componentsRotate::-webkit-scrollbar-track {
  background-color: #fff; /* 设置滚动条轨道的背景颜色 */
}

/* 设置滚动条滑块的样式 */
.f-extend-panel-item-content-components-openScroll .f-extend-panel-item-content-componentsRotate::-webkit-scrollbar-thumb {
  border-radius: 0px; /* 设置滚动条滑块的圆角 */
  background:#5bc374;
}

.f-extend-panel-item-content-components-openScroll .f-extend-panel-item-content-componentsScroll {
    width: auto;
    height:var(--extend-panel-content-height);
    position:absolute;
    left:100%;
    transform-origin:0 0 ;
    transform:rotate(90deg);
}
.f-extend-panel-item-content-components-openScroll .f-extend-panel-item-content-componentsContent {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.f-extend-panel-item-content-components,
.f-extend-panel-item-content-componentsRotate,
.f-extend-panel-item-content-componentsScroll,
.f-extend-panel-item-content-componentsContent{
    width: 100%;
    height:100%;
}
.f-extend-panel-item-content-componentsContent{
    display:flex;
    align-items:center;
}

.f-extend-panel-item-content-components-ul {
    display: flex;
    width: 100%;
    margin: auto 0px;
    padding: 0px 12px;
}

.f-extend-panel-item-content-components-ui-li {
    flex: 1;
    /* min-width: 100px; */
    border-radius: 10px;
    box-shadow: -1px -1px 2px #3b8ce97a, 1px 1px 2px #5bc3747a;
    background-color: #ffffff8a;
    padding:calc(var(--extend-panel-content-height) * 0.12)  calc(var(--extend-panel-content-height) * 0.14);
}

.f-extend-panel-item-content-components-ui-li+.f-extend-panel-item-content-components-ui-li {
    margin-left: calc(var(--extend-panel-content-height) * 0.12);
}

.f-extend-panel-item-content-components-ui-li-label {
    font-size: 22px;
    font-weight: 600;
    height: 24px;
    line-height: 22px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f-extend-panel-item-content-components-ui-li-value {
    display: block;
    margin-top: calc(var(--extend-panel-content-height) * 0.08);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f-extend-panel-item-content-components-ui-li-value-num {
    font-size: 26px;
    line-height: 26px;
    height: 26px;
    color: #333;
    font-weight: 600;
}

.f-extend-panel-item-content-components-ui-li-value-unit {
    font-size: 16px;
    height: 16px;
    line-height: 16px;
    margin-bottom: 2px;
    margin-left: 2px;
}